import React, { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import Test1 from '@/pages/Test1'
import Test2 from '@/pages/Test2'

// 路由的懒加载
const Home = lazy(() => import('../pages/Home'))
const View = lazy(() => import('../pages/View'))

// 封装lazyComponent
const withLoading = (component: JSX.Element) => (
    <React.Suspense fallback={<div> Loading</div>} >
        {component}
    </React.Suspense>
)


const routes = [
    {
        path: '/',
        element: <Navigate to='/home' />
    },
    {
        path: '/',
        element: <Home />,
        children: [
            {
                path: '/test1',
                element: <Test1 />
            },
            {
                path: '/test2',
                element: <Test2 />
            },
        ]
    },
    {
        path: '/home',
        // 路由的懒加载
        element: withLoading(<Home />)

    },
    {
        path: '/view',
        element: withLoading(<View />)
    }


]

export default routes